<template>
  <div class='container'>
      <!-- 第一部分内容 -->
      <el-descriptions :column="4">
        <el-descriptions-item label="【题型】">{{hire2Enum[detailForm.questionType]}}</el-descriptions-item>
        <el-descriptions-item label="【编号】">{{detailForm.id}}</el-descriptions-item>
        <el-descriptions-item label="【难度】">{{hireEnum[detailForm.difficulty]}}</el-descriptions-item>
        <el-descriptions-item label="【标签】">{{detailForm.tags}}</el-descriptions-item>
        <el-descriptions-item label="【学科】">{{detailForm.subjectName}}</el-descriptions-item>
        <el-descriptions-item label="【目录】">{{detailForm.catalogID}}</el-descriptions-item>
        <el-descriptions-item label="【方向】">{{detailForm.direction}}</el-descriptions-item>
      </el-descriptions>
      <hr>
      <!-- 第二部分内容 -->
      <!-- <el-descriptions :column="1">
        <el-descriptions-item label="【题干】"></el-descriptions-item>
      </el-descriptions> -->
      【题干】:
      <div class="question" v-html="detailForm.question"><span></span></div>
      <el-row>{{hire2Enum[detailForm.questionType]}} 选项:（以下选中的选项为正确答案）</el-row>
      <!-- 单选题 -->
      <el-row v-if="detailForm.questionType==='1'">
        <el-radio-group :value="radio">
          <el-row v-for="item in detailForm.options" :key="item.id" style="margin:10px 0px">
            <el-radio :label="item.isRight">{{item.code}}:{{item.title}}</el-radio>
          </el-row>
        </el-radio-group>
      </el-row>
      <!-- 多选题 -->
      <el-row v-else-if="detailForm.questionType==='2'">
        <el-checkbox-group  :value="checkList">
          <el-row v-for="item in detailForm.options" :key="item.id" style="margin:10px 0px">
            <el-checkbox :label="item.isRight">{{item.title}}</el-checkbox>
          </el-row>
        </el-checkbox-group>
      </el-row>
      <!-- 简答题 -->
      <el-row v-else></el-row>
      <hr>
      <!-- 第三部分内容 -->
      <div>
          <!-- <el-descriptions :column="1">
            <el-descriptions-item label="【参考答案】"><el-button type="danger">视频答案预览</el-button></el-descriptions-item>
          </el-descriptions> -->
          【参考答案】: <el-button type="danger" @click="isShow=true">视频答案预览</el-button>
          <!-- <div style="height:100px;width:200px" v-if="isShow">
            <Video :src="detailForm.videoURL"></Video>
          </div> -->
          <div class="demo1-video" v-if="isShow">
            <Video id="myVideo"
                class="自定义"
                controls
                autoplay="muted"
                preload="auto"
                poster="../assets/logo.png">
              <source :src="detailForm.videoURL" type="video/mp4" >
            </Video>
          </div>
          <hr>
        <!-- <el-descriptions :column="1">
          <el-descriptions-item label="【答案解析】">
            <div v-html="detailForm.answer"></div>
          </el-descriptions-item>
        </el-descriptions> -->
        【答案解析】: <span v-html="detailForm.answer"></span>
          <hr>
        <el-descriptions :column="1">
          <el-descriptions-item label="【题目备注】">{{detailForm.remarks}}</el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- 底部关闭按钮 -->
      <el-row type="flex" justify="end">
        <el-button @click="$emit('closeDialog')" type="primary">关闭</el-button>
      </el-row>
  </div>
</template>

<script>
export default {
  props: {
    detailForm: {
      type: Object
    },
    hireEnum: {
      type: Object
    },
    hire2Enum: {
      type: Object
    }
  },
  data () {
    return {
      // 单选题数据项
      radio: 1,
      // 多选题渲染列表数据
      checkList: [1],
      isShow: false,
      hire3Enum: {
        0: false,
        1: true
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.question{
  color: blue;
}
</style>
